<template>
	<slideshow :swiperList='swiperList'></slideshow>
	<view class="vipInfo_box padding">
		<view class="vipInfo">
			<view class="vipInfo_item">
				<text class="vipName">Tiff</text>
				<text class="vipType">初级茶粉</text>
			</view>
			<view class="touxiang"></view>
			<!-- 会员信息 -->
			<view class="vipDetail">
				<view class="vipTypeInfo">
					<view class="type" style="margin-top: 24rpx">
						<text>0</text>/<text>500</text>
					</view>
					<view class="chengzhangzhi"></view>
					<view class="chafen" style="font-size: 22rpx;margin-top: 12rpx;">
						还需要500成长值升为中级茶粉 <image src="../../static/icon/yj.png" mode=""></image>
					</view>
				</view>
				<view class="huiyuanma">
					<image src="../../static/icon/erweima.png" mode=""></image>
					<text>会员码</text>
				</view>
			</view>
			<!-- 积分&优惠券 -->
			<view class="scoreStore">
				<view class="" style="border-right: 1rpx solid #eeeeee;">
					<image src="../../static/icon/score.png" mode=""></image>积分
				</view>
				<view class="" @click="gopages('/pages/card-list/card-list')">
					<image  src="../../static/icon/coupon.png" mode=""></image>优惠券
				</view>
			</view>
		</view>
	</view>
	<!-- 我的服务 -->
	<view class="myService_box">
		<view class="myService">
			<view class="" style="font-size: 26rpx;font-weight: bold;">
				我的服务
			</view>
			<view class="myService_item">
				<view class="">
					<image src="../../static/icon/shop.png" mode=""></image>
					<view class="myService_title">积分商城</view>
				</view>
				<view class="">
					<image src="../../static/icon/waimai.png" mode=""></image>
					<view class="myService_title">外卖特权</view>
				</view>
				<view class="">
					<image src="../../static/icon/gerenziliao.png" mode=""></image>
					<view class="myService_title">个人资料</view>
				</view>
				<view class="">
					<image src="../../static/icon/service.png" mode=""></image>
					<view class="myService_title">联系客服</view>
				</view>
				<view class="">
					<image src="../../static/icon/more.png" mode=""></image>
					<view class="myService_title">更多服务</view>
				</view>
			</view>
		</view>
	</view>
	<!-- 广告区域 -->
	<view class="advertisings">
		<image src="../../static/banner/816ac55d2a12a66eae517ae16e3f68a6.jpeg" mode=""></image>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	// import {
	// 	onReady
	// } from "@dcloudio/uni-app";
	//存放轮播图数组
	let swiperList = ref([
		'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.ntimg.cn%2Ffile%2F20200820%2F12897125_081615415000_2.jpg&refer=http%3A%2F%2Fpic.ntimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668358213&t=f20c748aafcdc3ea561f4f5de081f791',
		'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp4.itc.cn%2Fq_70%2Fimages01%2F20210929%2F5e3f614c2b4040f7b6e117d64ce91a51.png&refer=http%3A%2F%2Fp4.itc.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668358133&t=2432cee543c5ee7b643bcbd17b9b8e37',
		'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp3.ssl.qhimgs3.com%2Ft010742f39fee8fb75a.jpg&refer=http%3A%2F%2Fp3.ssl.qhimgs3.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668358180&t=b5176cc154d033a5651e93f17334d722'
	]);
	//获取轮播图数据
	// onReady(async () => {
	// 	let data = await getBannerImg();
	// 	swiperList.value = data;
	// 	console.log(swiperList.value);
	// })
	function gopages(url){
		uni.navigateTo({
			url
		})
	}
</script>

<style>
	page {
		background-color: #f8f8f8;
	}

	.padding {
		padding-left: 30rpx;
		padding-right: 30rpx;
		box-sizing: border-box;
	}

	.vipInfo_box {
		width: 100%;
		height: 338rpx;
		position: absolute;
		top: 378rpx;
	}

	.vipInfo {
		width: 100%;
		height: 338rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		padding-top: 34rpx;
		box-sizing: border-box;
		border-radius: 20rpx;

		background-color: #fff;
	}

	.touxiang {
		width: 100rpx;
		height: 100rpx;
		border-radius: 100rpx;
		border: 4rpx solid #fff;
		background-color: skyblue;
		position: absolute;
		top: -50rpx;
		right: 80rpx;
	}

	.vipName {
		font-size: 24rpx;
		font-weight: bold;
	}

	.vipType {
		display: inline-block;
		width: 90rpx;
		line-height: 32rpx;
		text-align: center;
		background-color: #e5eef6;
		color: #044ccd;
		border-radius: 32rpx;
		margin-left: 22rpx;
		font-size: 16rpx;
	}

	.huiyuanma {
		margin-top: 16rpx;
		font-size: 18rpx;
		height: 86rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
	}

	.huiyuanma image {
		width: 40rpx;
		height: 40rpx;
		display: block;
	}

	.huiyuanma text {
		margin-top: 18rpx;
		color: #666660;
	}

	.vipTypeInfo image {
		width: 20rpx;
		height: 20rpx;
	}

	.vipDetail {
		display: flex;
		justify-content: space-between;
	}

	.vipTypeInfo {
		font-size: 14rpx;
	}

	.chengzhangzhi {
		width: 410rpx;
		height: 16rpx;
		border-radius: 16rpx;
		background-color: #f8f8f8;
		margin-top: 12rpx;
	}

	.scoreStore {
		width: 100%;
		height: 98rpx;
		display: flex;
		margin-top: 28rpx;
		border-top: 1rpx solid #eeeeee;
	}

	.scoreStore view {
		width: 50%;
		line-height: 86rpx;
		text-align: center;
		color: #626262;
		font-size: 26rpx;
	}

	.scoreStore image {
		width: 36rpx;
		height: 36rpx;
		margin-right: 14rpx;
		position: relative;
		top: 9rpx;
	}

	.myService_box {
		width: 100%;
		height: 214rpx;
		padding-left: 28rpx;
		padding-right: 28rpx;
		box-sizing: border-box;
		margin-top: 320rpx;
	}

	.myService {
		width: 100%;
		height: 100%;
		border-radius: 20rpx;
		background-color: #fff;
		padding: 34rpx 46rpx 48rpx 28rpx;
		box-sizing: border-box;
	}

	.myService_item {
		display: flex;
		/* border: 1rpx solid; */
		justify-content: space-between;
		align-items: space-between;
		font-size: 24rpx;
		color: #666;
		margin-top: 24rpx;
	}

	.myService_item view {
		text-align: center;
		height: 70rpx;
	}

	.myService_item image {
		width: 34rpx;
		height: 34rpx;
	}

	.myService_title {
		margin-top: 16rpx;
	}

	.advertisings {
		width: 100%;
		height: 248rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		box-sizing: border-box;
		margin-top: 24rpx;
	}

	.advertisings image {
		width: 100%;
		height: 100%;
		display: block;
		border-radius: 20rpx;

	}
</style>
